import React from 'react';
import './index.scss'
import { Draggable } from 'react-beautiful-dnd'

function App(props) {
    // 获取input数据
    const { data, index, deleteItemById } = props
    const { id, content } = data
    // 删除该项
    function deleteItem(id) {
        deleteItemById(id)
    }

    return (
        <Draggable draggableId={id.toString()} index={index} key={id}>
            {(provided) => (
                <div className='itemContent'
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}>
                    <div className='closeBtn' onClick={deleteItem.bind(this, id)}>x</div>
                    <div className='content'>{content}</div>
                </div>
            )}
        </Draggable>
    );
}

export default App;